<!DOCTYPE html>
<html class="no-js" lang="en">
	<meta charset="UTF-8"/>
	<title>智能桌上足球 - Powered by 机智云</title>
	<meta name="language" content="zh"/>
	<meta name="description" content="智能桌上足球，用微信来组队，桌子自己上报分数，组队进行联盟大战！"/>
	<meta name="imagetoolbar" content="no"/>
	<link rel="shortcut icon" href="/images/favicons/fi_standard.ico" type="image/x-icon"/>
	<link rel="apple-touch-icon" href="/images/favicons/fi_apple_touch.png"/>
	<link rel="stylesheet" type="text/css" href="/extensions/css/kickerapp.css"/>
	<link rel="stylesheet" type="text/css" href="//s7.addthis.com/static/r07/widget/css/widget007.old.css" media="all">
</html>
<body>
	<div class="header">
		<h1><a href="/">智能桌上足球</a></h1>
		<ul class="main nav" id="js_nav">
			<li><a href="#movie" title="使用指导">如何使用</a></li>
			<li><a href="#about" title="关于项目">关于项目</a></li>
			<li><a href="#demo" title="如何工作">工作原理</a></li>
			<li><a href="#inaction" title="精彩瞬间">精彩瞬间</a></li>
			<li><a href="#build" title="DIY">自己动手</a></li>
		</ul>
		<ul class="meta nav">
			<li><a href="http://www.gizwits.com">机智云</a></li>
			<!--<li><a href="/team.html">我们团队</a></li>-->
			<li><a href="mailto:foosball@gizwits.com?subject=smartfoosball.com">联系我们</a></li>
			<li><a href="https://github.com/smartfoosball/">GitHub</a></li>
		</ul>
	</div>
	<div class="article">
		<div class="section js_section" id="movie">
			<h2>智能桌上足球</h2>
			<h3 class="note">看我们怎样玩转智能硬件</h3>
			<div class="shadow">
				<iframe height=435 width=720 src="http://player.youku.com/embed/XODQzMTE0Nzgw" frameborder=0 allowfullscreen></iframe>
			</div>
		</div>
		<!--
		<div class="press">
			<h2>As seen on:</h2>
			<ul>
				<li><a href="http://latimesblogs.latimes.com/technology/2011/05/digitize-your-foosball-game.html"><img src="/images/logos/lg_latimes.png" width="248" height="35" alt="Los Angeles Times"></a></li>
				<li><a href="http://www.wired.com/playbook/2011/05/diy-digital-foosball/"><img src="/images/logos/lg_wired.png" width="142" height="35" alt="Wired"></a></li>
				<li><a href="http://www.crunchgear.com/2011/05/25/digital-foosball-table-is-a-foosball-table-that-is-digitial/"><img src="/images/logos/lg_crunchgear.png" width="186" height="35" alt="CrunchGear"></a></li>
			</ul>
		</div>
		-->
		<div class="section js_section" id="about">
			<h2>关于项目</h2>
			<div class="line">
				<div class="unit size1of2">
					<p>我们是一群狂热的桌上足球爱好者，我们也是一群有想法愿动手的程序猿。我们想让我们的比赛更好玩、更方便、更有激情，甚至是可以通过游戏认识更多的新朋友。</p>
					<p>想做就做，这是创客的精神，我们把自己的想法与机智云智能硬件开发平台和微信的开放平台结合起来，再加上自己动手对机智云 GoKit 套件的简单改造，做出来了很酷的东西。</p>
					<p>我们花了一个周末的时间把原型搭建起来了，接下来我们也许会产品化，也许只是给自己使用，但这又有什么关系呢？我们享受创造的过程，让创意的火花更亮一点吧！</p>
					<p>Happy coding! Happy inventing!</p>
				</div>
				<div class="unit lastUnit size1of2">
					<span class="shadow">
						<img src="/images/visuals/vs_team.jpg" width="350" height="232" alt=""/>
					</span>
					<p class="note">这是我们</p>
				</div>
			</div>
		</div>
		<div class="section js_section" id="demo">
			<h2>工作原理</h2>
			<div class="line">
				<div class="unit size1of2">
					<h3>整体思路</h3>
					<p>我们希望通过微信来发起一个赛事，让好友参与赛事挑战，选择好位置后就可以开始比赛了。球桌在改造后可以自动上报比分，球员在微信应用内可以看到实时的比赛情况，并在一局比赛结束后把比赛结果分享到朋友圈。</p>
				</div>
				<div class="unit lastUnit size1of2">
					<span class="shadow">
						<img src="/images/visuals/vs_arch.jpg" width="350" height="232" alt="整体架构"/>
					</span>
				</div>
			</div>
			<div class="subsection">
				<div class="line">
					<div class="unit rtl size1of2">
						<h3>微信应用</h3>
					</div>
				</div>
				<div class="line">
					<div class="unit size1of2">
						<span class="shadow">
							<img src="/images/visuals/vs_wechat.jpg" width="350" height="232" alt=""/>
						</span>
					</div>
					<div class="unit lastUnit size1of2">
						<p>由于微信应用强大的社交功能和人群覆盖，我们决定不做自己的应用，而是在微信的开放平台上进行开发。玩家可以通过对球桌上的二微码扫描加入智能桌上足球的联盟，接下来玩家可以创建新的赛事并把它发送给好友进行比赛邀约。比赛的实时战况，以及最终的结果，都可以通过微信的好友或者朋友圈分享出去。还犹豫什么呢，快点来和我们一起比赛吧！</p>
					</div>
				</div>
			</div>
			<div class="subsection">
				<h3>足球桌的改造</h3>
				<div class="line">
					<div class="unit size1of2">
						<p>硬件的改造也是一个关键点，我们采用了机智云 GoKit 开发套件，进行了简单的硬件修改，加入了 LED 显示和几个按键，同时对红外控测进行了重新编程。硬件的安装是个体力活，我们的动手能力也是要有32个赞哟！</p>
					</div>
					<div class="unit lastUnit size1of2">
						<span class="" style="">
							<img src="/images/visuals/vs_hard2.jpg" width="350" height="210" alt=""/>
						</span>
					</div>
				</div>
			</div>
			<div class="line subsection">
				<div class="unit size1of2">
					<span class="shadow">
						<img src="/images/visuals/vs_demo_ideas.jpg" width="350" height="232" alt=""/>
					</span>
				</div>
				<div class="unit lastUnit size1of2">
					<h3>更多想象空间</h3>
					<p>你看到的只是一个原型，我们还可以利用机智云提供的强大的数据服务，打造更多的精彩内容和功能。目前正在规划的有球员和球队的胜率统计和各种技术指标统计，另外还有就是联赛的功能，想起来都酷毙了！心动不如行动，如果你也有好的想法，请加入我们！</p>
					</div>
			</div>
		</div>
		<div class="section js_section" id="inaction">
			<h2>精彩瞬间</h2>
			<div id="slider1_container" class="slideshow shadow">
				<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 720px; height: 478px;">
					<div><img u="image" src="/images/slides/image1.jpg" /></div>
					<div><img u="image" src="/images/slides/image2.jpg" /></div>
					<div><img u="image" src="/images/slides/image3.jpg" /></div>
				</div>
			</div>
		</div>
		<div class="section js_section" id="build">
			<h2>自己动手 DIY</h2>
			<div class="line">
				<div class="unit size2of3">
					<h3>硬件改造</h3>
					<p>我们用的是机智云的服务，而机智云又正好提供了一块免费的开发板—GoKit，上面有一些常见的传感器和一块 WiFi 模块。由于 GoKit 自带的传感器还不太够用，于是我们决定对它进行一些改造。最主要的改动是我们加了两个红外传感器，用来感应进球，从而可以实现自动记分；另外我们还增加了一块 LED 显示屏，用来显示当前的分数。安装是个技术加体力的活，也最能反映创客和码农之间的区别。因为每张球台都不一样，你一定要发挥出色的观察和设计能力才能把它装好。</p>
				</div>
				<div class="unit lastUnit size1of3">
					<img src="/images/visuals/vs_shoppinglist.jpg" width="225" height="225" alt="Shopping list"/>
				</div>
			</div>
			<h3>步骤</h3>
			<div class="line">
				<dl class="unit size1of3">
					<dt>
						<span class="shadow">
							<img src="/images/visuals/vs_build_step1.jpg" width="227" height="170" alt=""/>
						</span>
					</dt>
					<dd><b>第一步、&nbsp;</b> 基本设计</dd>
				</dl>
				<dl class="unit size1of3">
					<dt>
						<span class="shadow">
							<img src="/images/visuals/vs_build_step2.jpg" width="227" height="170" alt=""/>
						</span>
					</dt>
					<dd><b>第二步、&nbsp;</b>测试传感器</dd>
				</dl>
				<dl class="unit lastUnit size1of3">
					<dt>
						<span class="shadow">
							<img src="/images/visuals/vs_build_step3.jpg" width="227" height="170" alt=""/>
						</span>
					</dt>
					<dd><b>第三步、&nbsp;</b>测试 LED 显示屏</dd>
				</dl>
			</div>
			<div class="line">
				<dl class="unit size1of3">
					<dt>
						<span class="shadow">
							<img src="/images/visuals/vs_build_step4.jpg" width="227" height="170" alt=""/>
						</span>
					</dt>
					<dd><b>第四步、&nbsp;</b>重新烧写 GoKit 上的 MCU 程序</dd>
				</dl>
				<dl class="unit size1of3">
					<dt>
						<span class="shadow">
							<img src="/images/visuals/vs_build_step5.jpg" width="227" height="170" alt=""/>
						</span>
					</dt>
					<dd><b>第五步、&nbsp;</b>安装</dd>
				</dl>
				<dl class="unit lastUnit size1of3">
					<dt>
						<span class="shadow">
							<img src="/images/visuals/vs_build_step6.jpg" width="227" height="170" alt=""/>
						</span>
					</dt>
					<dd><b>第六步、&nbsp;</b>联调测试</dd>
				</dl>
			</div>
			<div class="subsection">
				<h3>软件部分</h3>
				<div class="line">
					<div class="unit size1of2">
						<p>我们的软件，包括这个网站，都是开源的。你可以在 GitHub 上下载所有的代码。玩得开心！</p>
					</div>
					<div class="unit lastUnit size1of2">
						<span class="shadow">
							<img src="/images/visuals/vs_build_software.jpg" width="350" height="232" alt=""/>
						</span>
					</div>
				</div>
			</div>
		</div>
		<div class="download">
			<a href="https://github.com/smartfoosball">Download</a>
		</div>
	</div>

	<!-- AddThis Button BEGIN -->
	<!--
	<div class="addthis_toolbox">
		<a class="addthis_button_email">Email</a>
		<a class="addthis_button_facebook">Send to Facebook</a>
		<a class="addthis_button_twitter">Tweet This</a>
		<a class="addthis_button_expanded">View more services</a>
	</div>
	-->

	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript">window.jQuery || document.write('<script src="/extensions/js/libs/jquery-1.9.1.min.js">\x3C/script>')</script>
	<script type="text/javascript" src="/extensions/js/libs/jssor.slider.min.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			var options = { $AutoPlay: true };
			var jssor_slider1 = new $JssorSlider$('slider1_container', options);
		});
	</script>

	<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
	<script type="text/javascript" src="//s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4dc98831344f73a8"></script>
	<!-- AddThis Button END -->

	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-42371101-1']);
		_gaq.push(['_trackPageview']);
		_gaq.push(['_trackPageLoadTime']);

		(function() {
		var ga = document.createElement('script'); ga.type =
		'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
		'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(ga, s);
		})();
	</script>

</body>
</html>
